<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
   <!--  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet"> -->
</head>

<body class="dpflex fdc">
    <!-- 内容区域 -->
    <div class="content flex1">
        <!-- 轮播开始 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"> <img src="../img/index-swiper-bg1.jpg" alt=""> </div>
                <div class="swiper-slide"> <img src="../img/index-swiper-bg2.jpg" alt=""> </div>
                <div class="swiper-slide"> <img src="../img/index-swiper-bg3.jpg" alt=""> </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <!-- 轮播结束 -->
        <!-- main 运动  -->
        <div class="main">
            <!-- 今日排名和累计打卡 -->
            <div class="ranking-Cumulative dpflex">
                <!-- 今日排名 -->
                <div class="ranking">
                    <p class="today">今日排名</p>
                    <span class="reankNum" id="reankNum"></span>
                </div>
                <!-- 累计打卡 -->
                <div class="Cumulative">
                    <p class="card">累计打卡<span class="Days" id="punchDays"></span>天</p>
                    <div class="punchBtn" id="punchBtn"></div>
                </div>
            </div>
            <!-- 运动数据和运动徽章 -->
            <div class="motion-badge dpflex">
                <!-- 运动数据 -->
                <div class="motion">
                    <p class="text">运动数据</p>
                </div>
                <!-- 运动徽章 -->
                <div class="badge">
                    <p class="badge-text">累计运动徽章</p>
                    <p class="Pieces"><span class="badgeNum" id="badgeNum"></span>枚</p>
                </div>
            </div>
            <!-- 课程训练 -->
            <div class="curriculum">
                <p class="curriculum-text">课程训练</p>
            </div>
            <!-- 户外跑步 -->
            <div class="outdoors">
                <p class="runtext">户外跑步</p>
            </div>
        </div>
    </div>
    <!-- 底部导航栏 -->
    <footer class="footer" id="footer"></footer>



    <!-- 引入swiper的 js -->
   <!--  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- <script src="../lib/captcha/captcha-mini.js"></script> -->
</body>

</html>